<script setup>
import { useRoute } from '@/router';
import { useRequest, useResetForm } from '@/hooks';
import { getPriceRecordList, getPriceRecordDetail } from '@/api/index.js';
import { TableList } from '@/components/MainComponents.js';

const code = useRoute().query?.code;
const queryForm = ref(null);
const appDom = ref(null);
const contBoxHeight = ref(null);
const open = ref(false);
const tableParams = ref({
  pageNum: 1,
  pageSize: 10,
  fileName: null,
  status: null,
  sDate: null,
  eDate: null,
  enterpriceCode: code,
});
const handleClick = (row, $index) => {
  detailParams.value.importBatch = row.importBatch;
  runDetail(detailParams.value);
  open.value = true;
};
const columnObj = ref({
  index: true,
  columnData: [
    {
      text: true,
      prop: 'fileName',
      label: '数据文件名称',
      width: '',
      align: 'center',
    },
    {
      text: true,
      prop: 'importTime',
      label: '上传时间',
      width: '',
      align: 'center',
    },
    {
      text: true,
      prop: 'importStatus',
      label: '上传状态',
      width: '',
      align: 'center',
    },
    {
      text: true,
      prop: 'failureReason',
      label: '失败原因',
      width: '',
      align: 'center',
    },
    {
      label: '操作',
      width: '',
      align: 'center',
      operations: [
        {
          type: 'text',
          label: '详情',
          buttonClick: handleClick,
        },
      ],
    },
  ],
});
const [tableData, loading, run] = useRequest(getPriceRecordList, {
  defaultParams: [tableParams.value],
  debounceInterval: 300,
});
const paginationChange = e => {
  tableParams.value.pageNum = e.page;
  tableParams.value.pageSize = e.limit;
  run(tableParams.value);
};
const handleQuery = () => {
  tableParams.value.pageNum = 1;
  run(tableParams.value);
};
const resetQuery = () => {
  useResetForm(queryForm);
  run(tableParams.value);
};

// 详情列表
const detailParams = ref({
  pageNum: 1,
  pageSize: 10,
  importBatch: null,
});
const columnObj2 = ref({
  index: true,
  columnData: [
    {
      text: true,
      prop: 'energyType',
      label: '能源类型',
      width: '',
      align: 'center',
    },
    {
      text: true,
      prop: 'costDate',
      label: '费用周期',
      width: '',
      align: 'center',
    },
    {
      text: true,
      prop: 'price',
      label: '费用单价',
      width: '',
      align: 'center',
    },
    {
      text: true,
      prop: 'unit',
      label: '费用单位',
      width: '',
      align: 'center',
    },
  ],
});
const [detailData, loading2, runDetail] = useRequest(getPriceRecordDetail, {
  defaultParams: [detailParams.value],
  debounceInterval: 300,
  manual: true,
});
const paginationChange2 = e => {
  detailParams.value.pageNum = e.page;
  detailParams.value.pageSize = e.limit;
  runDetail(detailParams.value);
};
onMounted(() => {
  contBoxHeight.value = appDom.value.clientHeight - 233;
});
</script>

<template>
  <div class="app-container" ref="appDom">
    <div class="u-df-spb u-mb20">
      <div class="u-prim-text u-fs18">能源价格维护历史</div>
      <i class="el-icon-back u-sec-text cursor u-fs20" @click="$router.replace({ path: '/zhny/nytg/engPrice' })"></i>
    </div>
    <div class="searBox u-mb20">
      <el-form :model="tableParams" ref="queryForm" :inline="true">
        <el-form-item label="数据文件名称" prop="fileName">
          <el-input
            v-filter-input
            style="width: 200px"
            v-model.trim="tableParams.fileName"
            placeholder="请输入数据文件名称"
            clearable
            size="small"
          />
        </el-form-item>
        <el-form-item label="上传状态" prop="status">
          <el-select
            v-model="tableParams.status"
            placeholder="请选择上传状态"
            clearable
            size="small"
            style="width: 200px"
          >
            <el-option v-for="item in ['成功', '失败']" :key="item" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="sDate">
          <el-date-picker
            v-model="tableParams.sDate"
            type="date"
            value-format="yyyy-MM-dd"
            size="small"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="eDate">
          <el-date-picker
            v-model="tableParams.eDate"
            type="date"
            value-format="yyyy-MM-dd"
            size="small"
            clearable
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button size="small" type="primary" plain @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="u-base-fg u-p20">
      <TableList
        v-loading="loading"
        :tableData="tableData?.rows ?? []"
        :columObj="columnObj"
        :pageObj="tableParams"
        :total="tableData?.total ?? 0"
        :height="contBoxHeight"
        @getList="paginationChange"
      />
    </div>
    <el-dialog :visible.sync="open" width="80%" append-to-body>
      <div slot="title" class="dialog-title">
        <span class="tit">详情</span>
        <!-- <span class="tit_con">{{ title_con }}</span> -->
      </div>
      <TableList
        v-loading="loading2"
        :tableData="detailData?.rows ?? []"
        :columObj="columnObj2"
        :pageObj="detailParams"
        :total="detailData?.total ?? 0"
        :height="500"
        @getList="paginationChange2"
      />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped></style>
